<template>
	<div id="head-wrap">
		<img id="cai" src="../../static/images/cai.gif" alt="" />
		<div class="row">
			<div class="logo">
				<img src="../../static/images/logo.png" />
			</div>
			<div class="search-input">
				<div class="input-group">
					<img class="chicken" src="../../static/images/chicken.gif" alt="" />
					<input id="ipt" type="text" class="form-control" placeholder="菜谱名称" v-model="searchName">
					<span><button id="searchBtn" type="button" @click="search()" class="btn btn-default">搜食谱</button></span>
				</div>
			</div>
			<div class="daohang-list">
				<ul>
					<li>
						<!--<a href="/home">首页</a>-->
						<router-link to="/home">首页</router-link>
					</li>
					<li>
						<a href="#">关于我们</a>
					</li>
					<li>
						<a href="#">联系我们</a>
					</li>
					<li v-if="!show">
						<router-link to="/login">登录</router-link>
					</li>
					<li v-if="!show">
						<a href="#"></a>
						<router-link to="/register">注册</router-link>
					</li>
					<li v-if="show" style="width: 59px;" class="logout">
						{{nickName}}
						<a href="#" @click="logout()">退出</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import bus from '../bus.js'
	export default {
		name: 'mainheader',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App',
				searchName: '',
				show: true,
				nickName: '',
			}
		},
		mounted() {
			var _this = this;
			bus.$on('send2', function(til) {
				_this.searchName = til;
			})
			$("#ipt").focus(function() {
				$('.chicken').animate({
					top: "-20px"
				}, 500, 'linear')
			})
			$("#ipt").blur(function() {
				$('.chicken').animate({
					top: "0px"
				}, 100, 'linear')
			})

			//获取本地存储
			var token = localStorage.getItem('token');
			//发送请求,用户信息
			this.$axios({
				method: "get",
				url: "/token/loadName",
				data: {}, //参数
				headers: {
					"user-key": token //请求头携带的token
				}
			}).then(res => {
				if(res.data.status == 200) {
					_this.show = true;
					_this.nickName = res.data.data;
				} else {
					_this.show = false;
				}
				console.log(res);
			});
		},
		methods: {
			search() {
				bus.$emit('send', this.searchName);
			},
			logout() {
				var _this = this;
				//获取本地存储
				var token = localStorage.getItem('token');
				this.$axios({
					method: "get",
					url: "/token/logout",
					data: {}, //参数
					headers: {
						"user-key": token //请求头携带的token
					}
				}).then(res => {
					_this.show = false;
					_this.nickName = '';
					console.log(res);
				});
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	
	#ipt {
		width: 340px;
		height: 40px;
		border-radius: 5px 0 0 5px;
	}
	
	.search-input {
		margin-top: 38px;
		float: left;
	}
	
	#head-wrap {
		background: #fff;
		height: 100px;
		width: 100%;
		position: fixed;
		top: 0;
		box-shadow: 0 0 5px #000;
		z-index: 9999;
	}
	
	.logo {
		width: 150px;
		height: 68px;
		margin-top: 16px;
		float: left;
		margin-right: 120px;
	}
	
	.chicken {
		position: absolute;
		top: 0px;
		left: 40px;
	}
	
	.container-fluid {
		height: 100px;
		background-color: white;
		border-bottom: 1px solid #eadfdf;
	}
	
	.container-fluid ul,
	li {
		width: auto;
		float: left;
		font-size: 16px;
		align-content: center;
	}
	
	#searchBtn {
		background-color: #f66;
		color: #fff;
		height: 40px;
		margin-left: -1px;
		border-radius: 0 3px 3px 0;
	}
	
	.daohang-list {
		width: 350px;
		margin-top: 36px;
		margin-left: 10px;
		float: right;
	}
	
	.daohang-list ul {
		width: 100%;
	}
	
	.daohang-list ul li {
		float: left;
		padding: 10px;
	}
	
	li a {
		color: #000000;
		text-decoration: none;
		padding-bottom: 4px;
	}
	
	li a:hover {
		color: #f66;
		border-bottom: 2px solid #f66;
	}
	
	.row {
		width: 1144px;
		margin: 0 auto;
	}
	.logout{
		cursor: pointer;
	}
	.logout a{
		display: none;
	}
	.logout:hover a{
		display: block;
		cursor: pointer;
	}
	#cai{
		position: fixed;
		left: 150px;
		top: 5px;
		width: 83px;
	}
</style>